সার্ভিস তৈরি এবং ব্যবহার

Web Development - অ্যাঙ্গুলার (Angular) - সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন |
1
1

Angular-এ সার্ভিস হল এমন একটি ক্লাস যা কম্পোনেন্ট, ডিরেক্টিভ, বা অন্যান্য সার্ভিসের মধ্যে পুনঃব্যবহারযোগ্য লজিক এবং ডেটা সরবরাহ করে। সার্ভিস সাধারণত অ্যাপ্লিকেশন লেভেলের ডেটা ম্যানেজমেন্ট, HTTP কল, ফর্ম ভ্যালিডেশন বা অন্যান্য কাজে ব্যবহৃত হয়। Angular সার্ভিসের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হল ডিপেন্ডেন্সি ইনজেকশন (Dependency Injection, DI), যার মাধ্যমে সার্ভিসগুলিকে কম্পোনেন্ট বা অন্যান্য সার্ভিসে ইনজেক্ট করা হয়।


সার্ভিস তৈরি করা

Angular-এ সার্ভিস তৈরি করার জন্য, আমরা সাধারণত CLI ব্যবহার করি, যেটি কোড জেনারেট করতে দ্রুত এবং সহজ উপায় প্রদান করে।

সার্ভিস তৈরি করার CLI কমান্ড:

ng generate service user

এটি user.service.ts নামের একটি সার্ভিস ফাইল তৈরি করবে, যেখানে আমরা আমাদের সার্ভিসের লজিক লিখতে পারব।

সার্ভিসের উদাহরণ:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'  // সার্ভিসটি রুট লেভেলে ইনজেক্ট হবে
})
export class UserService {

  constructor() { }

  getUserData() {
    return { name: 'John Doe', age: 30 };
  }

  saveUserData(user: any) {
    console.log('User data saved:', user);
  }
}

এখানে:

  • @Injectable ডেকোরেটরটি Angular-কে জানিয়ে দেয় যে এই ক্লাসটি একটি সার্ভিস এবং এটি ইনজেকশনের জন্য প্রস্তুত।
  • providedIn: 'root' নির্দেশ করে যে সার্ভিসটি অ্যাপ্লিকেশন জুড়ে একটি একক ইন্সট্যান্স (singleton) হিসেবে ব্যবহৃত হবে।

সার্ভিস ব্যবহার করা

একবার সার্ভিস তৈরি হলে, আপনি এটি Angular কম্পোনেন্ট, ডিরেক্টিভ, অথবা অন্য সার্ভিসে ব্যবহার করতে পারেন। সার্ভিসে getUserData() এবং saveUserData() ফাংশন রয়েছে, এখন এই সার্ভিসকে একটি কম্পোনেন্টে ইনজেক্ট করা যাক।

সার্ভিস ইনজেক্ট করা:

প্রথমে, কম্পোনেন্টে সার্ভিসটি ইনজেক্ট করতে হবে:

import { Component } from '@angular/core';
import { UserService } from './user.service';  // সার্ভিস ইমপোর্ট

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  user: any;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.user = this.userService.getUserData();
  }

  saveData() {
    this.userService.saveUserData(this.user);
  }
}

এখানে:

  • UserService ইনজেক্ট করা হয়েছে কম্পোনেন্টের কনস্ট্রাক্টরের মাধ্যমে।
  • getUserData() ফাংশনটি সার্ভিস থেকে ইউজারের ডেটা নিয়ে এসেছে এবং কম্পোনেন্টে প্রদর্শন করা হয়েছে।
  • saveData() ফাংশনটি সার্ভিসের saveUserData() ফাংশনকে কল করছে, যা ইউজারের ডেটা কনসোলে লগ করে।

HTML টেমপ্লেট:

<h1>User Data</h1>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>

<button (click)="saveData()">Save User Data</button>

এখানে, ইউজারের নাম এবং বয়স প্রদর্শিত হচ্ছে এবং একটি বাটনে ক্লিক করলে saveData() ফাংশনটি কল হয়ে সার্ভিসের মাধ্যমে ডেটা সেভ হবে।


সার্ভিসের বেনিফিট

  1. ডেটা শেয়ারিং: একাধিক কম্পোনেন্টে একই ডেটা শেয়ার করা সহজ হয়।
  2. কোড রিইউজেবিলিটি: সার্ভিসগুলির মাধ্যমে কোডকে পুনঃব্যবহারযোগ্য করা যায়, তাই একই লজিক বা ডেটা ব্যবহারের জন্য বারবার কোড লেখার প্রয়োজন নেই।
  3. টেস্টেবিলিটি: সার্ভিসগুলি সহজে টেস্ট করা যায়, কারণ এগুলি সাধারণত ইনপুট-আউটপুট ভিত্তিক এবং বাইরের ডিপেন্ডেন্সির উপর নির্ভর করে না।

সার্ভিসের ডিপেন্ডেন্সি ইনজেকশন

Angular-এ ডিপেন্ডেন্সি ইনজেকশন (DI) ব্যবহারের মাধ্যমে সার্ভিসগুলিকে কম্পোনেন্টে ইনজেক্ট করা হয়। DI নিশ্চিত করে যে প্রতিটি কম্পোনেন্ট বা সার্ভিস তাদের প্রয়োজনীয় সার্ভিস বা ডিপেন্ডেন্সি অ্যাঙ্গুলার রাউটার বা অন্যান্য অংশ থেকে সহজে পেয়ে যাবে।

DI এর উদাহরণ:

যদি আপনি দুটি সার্ভিসকে ইনজেক্ট করতে চান, তাহলে কনস্ট্রাক্টরের মাধ্যমে তা করা হয়:

import { Component } from '@angular/core';
import { UserService } from './user.service';
import { ProductService } from './product.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private userService: UserService, private productService: ProductService) { }

  ngOnInit() {
    console.log(this.userService.getUserData());
    console.log(this.productService.getProductList());
  }
}

এখানে, UserService এবং ProductService দুটো সার্ভিসকে একসাথে ইনজেক্ট করা হয়েছে।


সার্ভিসে HTTP কল ব্যবহার

এছাড়া, সার্ভিসে HTTP কল করার জন্য HttpClient ব্যবহার করা যায়। HTTP কলের মাধ্যমে সার্ভিসটি অ্যাপ্লিকেশন থেকে সার্ভারের সঙ্গে ডেটা আদান-প্রদান করতে পারে। HttpClientModule ইনপোর্ট করে HTTP সার্ভিস ব্যবহার করা যায়।

HTTP সার্ভিস উদাহরণ:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

এখানে, getData() ফাংশনটি HTTP GET রিকোয়েস্ট চালাচ্ছে এবং সার্ভার থেকে ডেটা নিয়ে আসছে।


সার্ভিসের ব্যবহার সংক্ষেপে

  1. সার্ভিস তৈরি করতে CLI ব্যবহার করুন।
  2. সার্ভিসের মাধ্যমে লজিক এবং ডেটা ম্যানেজমেন্ট পরিচালনা করুন।
  3. সার্ভিসকে DI (Dependency Injection) এর মাধ্যমে কম্পোনেন্টে ইনজেক্ট করুন।
  4. HTTP সার্ভিস ব্যবহারের জন্য HttpClient ব্যবহার করতে পারেন।
Content added By
Promotion